<template>

    <div>
        <Row style="margin:5px 0px 10px 5px">
            <i-col span="1" >
                <Button  size="default"  type="primary" @click="btn_refresh">刷新</Button>
            </i-col>
        </Row>
        <i-table size="default"   border stripe  :columns="format" :data="show_list" :height="sharedState.tableHeight" >
            <template slot-scope="{ row, index }" slot="action">
                <Button  size="default"  type="primary"  style="margin: 0 5px 0 0 "  @click="btn_batch_push_user(index)">批量推送</Button>
                <Button  size="default"  type="error"  style="margin: 0 5px 0 0 "  @click="btn_batch_delete_user(index)">批量删除</Button>
            </template>
        </i-table >
        <div style="text-align: center;margin-top: 10px;">
            <Page ref="page" :total="total" :page-size="pageSize"  @on-change="changePage" show-total/>
        </div>
    </div>
</template>

<script>

import { server_user_list,batch_push_user,batch_delete_user } from  '@/api'
import {post} from '@/api/http'
import store from '@/store'
import { show_simple_page } from '@/common/util'

export default {
    data() {
        return {
            sharedState: store.state,
            format: [
                {
                    title: '账号名称',key: 'name'
                },
                {
                    title: '密码',key: 'password',render: (h,params) => {
                        return h('div',[
                            h('a',{
                                style: {
                                    color: "blue"
                                },
                                on: {
                                    click: ()=>{                       
                                        this.handleLink(params);
                                    }
                                }
                            },'********')
                        ])
                    }
                },
                {
                    title: '操作',slot: 'action',width: 300,align: 'center'
                }
            ],
            total_list: [],
            show_list: [],
            // 分页
            total: 0,
            pageSize: 15,
        }
    },
    methods: {
		btn_refresh(){
            this.refresh()
        },
        // 点击密码
        handleLink(params){
          console.log(params.row.password)  
        },
        // 点击批量更新
        // 点击批量删除
        btn_batch_delete_user(index){
            let account = this.show_list[index].name
            let data = JSON.stringify({"account":account})
             
            post(batch_delete_user,data).then(response => {
                this.$Message.info("删除结果，稍后请查看更新日志")
                console.log("更新response：",response.data)
            })
        },
        // 点击批量删除
        btn_batch_push_user(index){
            let id = this.show_list[index].id
            let data = JSON.stringify({"id":id})

            post(batch_push_user,data).then(response => {
                this.$Message.info("更新结果，稍后请查看更新日志")
                console.log("更新response：",response.data)
            })
        },
        changePage(index) {
            let _start = (index -1) * this.pageSize
            let _end = index * this.pageSize
            this.show_list = this.total_list.slice(_start,_end)
        },
        refresh() {
            post(server_user_list).then( (response) => {
                show_simple_page(this,response)
            })
        }
    },
    mounted: function() {
        setTimeout(() =>{
            this.refresh();
        },200); 
    }
}
</script>
<style scoped>

</style>